<template>
    <Carousel autoplay v-model="value2" class="swiper">
        <Carousel-item class="swiper-item">
            <div class="demo-carousel"><img src="~assets/images/1.png" alt="" class="ban"></div>
        </Carousel-item>
        <Carousel-item class="swiper-item">
            <div class="demo-carousel"><img src="~assets/images/2.png" alt="" class="ban"></div>
        </Carousel-item>
        <Carousel-item class="swiper-item">
            <div class="demo-carousel">
              <img src="~/assets/images/banner@1x.png" alt="" class="ban">
            <div class="intro">
              <p>本周热门</p>
              <p class="intro-max">算法 | 识别</p>
              <p class="intro-max">汽车信息快速获取</p>
              <div class="intro-go" @click="tohome"><span class="go">立即探索</span><img src="~assets/images/探索icon@1x.png" alt=""></div>
            </div>
            </div>
        </Carousel-item>
    </Carousel>
</template>
<script>
    export default {
      name:'Swiper',
        data () {
            return {
               slideCount:0,
                value2: 2,
                swiperpic:['~assets/images/1.png','~assets/images/2.png']
            }
        },
//          mounted(){
//    //1.操作DOM，在前后添加Slide
//    setTimeout(()=>{
//      this.handleDom();
//         },100)
//  },
        methods:{
    //       handleDom(){
    //         // 1.获取要操作的元素
    //         let swiperEl = document.querySelector('.swiper-item').parentNode;
    // let slidesEls = swiperEl.getElementsByClassName('swiper-item');
    // // 2.保存个数
    // this.slideCount = slidesEls.length;
    // // 3.如果个数大于1，那么在前后分别添加一个slide
    // if(this.slideCount > 1){
    //   let cloneFirst = slidesEls[0].cloneNode(true);
    //   let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
    //   swiperEl.insertBefore(cloneLast,slidesEls[0]);
    //   swiperEl.appendChild(cloneFirst);
    //   this.totalWidth = swiperEl.offsetWidth;
    //   this.swiperStyle = swiperEl.style;
    //   }
    //     },
        tohome(){
          this.$router.push('/homePage');
        }
    }
  }
</script>
<style>
.demo-carousel{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.demo-carousel img{
  vertical-align: middle;
}
.demo-carousel .ban{
  width: 100%;
}
.demo-carousel .intro{
  position: absolute;
  top: 225px;
  left: 225px;
  color: #fff;
  font-size: 16px;
}
.demo-carousel .intro img{
  margin-left: 15px;
}
.demo-carousel .intro .intro-max{
  font-size: 1.875rem;
}
.demo-carousel .intro .intro-go{
  cursor: pointer;
  margin-top: 50px;
  z-index: 10;
}
#home-page .swiper{
  height: auto;
}
#home-page .swiper .right{
  margin-right: 2.5rem;
  width: 38px;
  height: 75px;
}
</style>